<template>
  <div>
    <my-breadcrumb :items="['订单管理', '订单中心']"></my-breadcrumb>
    <div v-if="id">
      当前为用户{{ orderData[0].nickname }}的全部订单，<a href="javascript:;" @click="toAll">点击这里</a>恢复全部订单
    </div>
    <order-search v-else ref="search" @statusChange="statusChange" @dateChange="searchByInfo" @searchByInfo="searchByInfo" @getAllOrder="getAllOrder"></order-search>
    <div class="tab" ref="table">
      <Table :columns="orderCol" :data="orderData" :loading="tabLoading"></Table>
    </div>
    <page-info :page="page" @pageNumChange="pageNumChange" @pageSizeChange="pageSizeChange"></page-info>
    <Modal v-model="showDetail" title="订单详情" :width="540" :styles="{top: '16px'}">
      <detail-modal ref="detailModal"></detail-modal>
    </Modal>
  </div>
</template>

<script>
import orderSearch from './orderSearch'
import detailModal from './detailModal'
import pageInfo from '../../common/pageInfo'
export default {
  name: 'order-list',
  data () {
    const convertData = val => {
      let data = new Date(parseInt(val))
      let timeM = data.toLocaleDateString()
      return timeM
    }
    const getDay = val => {
      let data = new Date(parseInt(val))
      let timeY = data.toTimeString().substr(0, 8)
      return timeY
    }
    return {
      url: {
        orderList: '/branch/order/list',
        notPay: '/branch/order/not/payment/list',
        otherStatus: '/branch/order/list/by/status',
        shipping: '/branch/order/list/by/not/finish/shipping',
        orderDetail: '/branch/order/detail',
        orderSearch: '/branch/order/search',
        userOrder: '/branch/user/order/list'
      },
      activeUrl: '',
      orderCol: [
        {
          title: '订单编号',
          key: 'orderNumber',
          width: 150,
          align: 'center'
        },
        {
          title: '微信',
          // width: 200,
          minWidth: 160,
          key: 'consigneeName',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  src: params.row.profilePhotoPath
                }
              }),
              h('span', params.row.nickname)
            ])
          },
          align: 'center'
        },
        {
          title: '付款来源',
          key: 'payFrom',
          width: 100,
          render: (h, params) => {
            let str = ''
            switch (params.row.payFrom) {
              case 1: str = '微信支付'
                break
              case 2: str = '余额支付'
                break
            }
            return h('span', str)
          },
          align: 'center'
        },
        {
          title: '实付款',
          key: 'orderActualPayment',
          width: 100,
          render: (h, params) => {
            return h('span', {
              style: {
                color: '#ed3f14',
                fontWeight: '800'
              }
            }, params.row.orderActualPayment / 100 + '￥')
          },
          align: 'center'
        },
        {
          title: '订单状态',
          key: 'status',
          width: 130,
          render: (h, params) => {
            let tag = 'Tag'
            let config = {}
            let text = '未付款'
            switch (params.row.status) {
              case 0:
              case 1:
                config = {
                  color: 'red'
                }
                text = '未付款'
                break
              case 2:
                tag = 'Button'
                config = {
                  type: 'warning',
                  size: 'small'
                }
                text = '未发货'
                break
              case 3:
                params.row.isFinishShipping === 1 ? text = '已发货' : text = '发货未完成'
                tag = 'Tag'
                config = {
                  color: 'blue'
                }
                break
              case 4:
                tag = 'Tag'
                config = {
                  color: 'blue'
                }
                text = '交易成功'
                break
              case 5:
                tag = 'Tag'
                config = {
                  color: 'red'
                }
                text = '交易关闭'
                break
            }
            return h(tag, {
              props: {
                ...config
              }
            }, text)
          },
          align: 'center'
        },
        {
          title: '物流方式',
          key: 'logisticsMode',
          width: 100,
          render: (h, params) => {
            let str = ''
            switch (params.row.logisticsMode) {
              case 1: str = '快递'
                break
              case 2: str = '物流'
                break
              case 3: str = '自提'
                break
              case 4: str = '送货上门'
                break
            }
            return h('span', str)
          },
          align: 'center'
        },
        {
          title: '更新时间',
          key: 'gmtModified',
          minWidth: 100,
          render: (h, params) => {
            return h('div', [
              h('p', convertData(params.row.gmtModified)),
              h('p', getDay(params.row.gmtModified))
            ])
          },
          align: 'center'
        },
        {
          title: '来源',
          key: 'buyerType',
          width: 100,
          render: (h, params) => {
            let text = '公众号'
            let color = '#5cadff'
            if (params.row.buyerType === 2) {
              text = '分销商'
              color = '#2b85e4'
            }
            return h('Tag', {
              props: {
                color
              }
            }, text)
          },
          align: 'center'
        },
        {
          title: '详情',
          width: 70,
          render: (h, params) => {
            return h('Button', {
              props: {
                size: 'small'
              },
              on: {
                click: () => {
                  this.notPayDetail(params.row.id)
                }
              }
            }, '详情')
          }
        },
        {
          title: '操作',
          key: 'do',
          width: 90,
          render: (h, params) => {
            if (params.row.status !== 0 && params.row.status !== 1) {
              return h('Button', {
                props: {
                  size: 'small',
                  type: 'primary'
                },
                on: {
                  click: () => {
                    // id: params.row.id, nickname: params.row.nickName, profilePhotoPath: params.row.profilePhotoPath
                    this.$router.push({path: '/order/orderDetail', query: {id: params.row.id}})
                  }
                }
              }, '订单发货')
            }
          }
        }
      ],
      orderData: [
        {}
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      status: null,
      tabLoading: true,
      logistics: [],
      showDetail: false,
      detailData: {},
      id: null
    }
  },
  methods: {
    statusChange (val) {
      this.status = {
        status: val
      }
      switch (val) {
        case 1:
          this.getNotPayList()
          break
        case 2:
          this.getShippingNot()
          break
        case 3:
        case 4:
          this.getOtherList()
          break
      }
    },
    initPage () {
      this.page.pageNum = 1
      this.page.pageSize = 10
      this.page.total = 0
    },
    getNotPayList () {
      this.activeUrl = this.url.notPay
      this.status = null
      this.initPage()
      this.getQueryInfo(this.page.pageNum, this.page.pageSize)
    },
    getOtherList () {
      this.activeUrl = this.url.otherStatus
      this.initPage()
      this.getQueryInfo(this.page.pageNum, this.page.pageSize, this.status)
    },
    getShippingNot () {
      this.activeUrl = this.url.shipping
      this.initPage()
      this.status = null
      this.getQueryInfo(this.page.pageNum, this.page.pageSize)
    },
    notPayDetail (id) {
      this.$ajax.post(this.url.orderDetail, id)
        .then(res => {
          if (res.data.success) {
            this.$refs.detailModal.setData(res.data.data)
            this.showDetail = true
          }
        })
    },
    // dateChange (date) {
    //   if (!date[0] || !date[1]) {
    //     return
    //   }
    //   this.activeUrl = this.url.orderSearch
    //   this.status = {beginTime: date[0], endTime: date[1]}
    //   this.initPage()
    //   this.getQueryInfo(this.page.pageNum, this.page.pageSize, this.status)
    // },
    searchByInfo (data) {
      this.activeUrl = this.url.orderSearch
      this.status = {
        ...data
      }
      this.initPage()
      this.getQueryInfo(this.page.pageNum, this.page.pageSize, this.status)
    },
    getAllOrder () {
      this.activeUrl = ''
      this.status = null
      this.getQueryInfo(this.page.pageNum, this.page.pageSize)
    },
    pageNumChange (page) {
      this.tabLoading = true
      this.getQueryInfo(page.pageNum, page.pageSize, this.status)
    },
    pageSizeChange (page) {
      this.tabLoading = true
      this.getQueryInfo(page.pageNum, page.pageSize, this.status)
    },
    getQueryInfo (pageNum, pageSize, status) {
      let url = this.activeUrl === '' ? this.url.orderList : this.activeUrl
      let params = {}
      if (this.id) {
        url = this.url.userOrder
        params = {
          pageQuery: {
            pageSize,
            pageNum
          },
          userId: this.id
        }
      } else {
        if (status) {
          params = {
            ...status,
            pageQuery: {
              pageNum,
              pageSize
            }
          }
        } else {
          params = {
            pageNum,
            pageSize
          }
        }
      }
      this.$ajax.post(url, JSON.stringify(params)).then(res => {
        if (res.data.success) {
          this.orderData = res.data.data.list
          this.page.total = res.data.data.total
        }
        this.tabLoading = false
      })
    },
    toAll () {
      this.id = null
      this.getQueryInfo(this.page.pageNum, this.page.pageSize)
    }
  },
  components: {
    orderSearch,
    pageInfo,
    detailModal
  },
  created () {
    this.id = this.$route.query.id
    this.getQueryInfo(this.page.pageNum, this.page.pageSize)
  }
}
</script>

<style scoped>
  .tab{
    overflow-x: auto;
  }
</style>
